<template>
  <div class="org-tree mr-10 scrollbar h-full">
    <!-- <div class="title mt-10 mb-10 ml-40" @click="handleAllParking">全部停车场</div> -->
    <el-tree
      ref="orgtree"
      :node-key="nodeKey"
      accordion
      :data="list"
      :props="defaultProps"
      :check-strictly="true"
      :highlight-current="true"
      :default-expanded-keys="ids"
      :expand-on-click-node="true"
      :default-checked-keys="checkedIds"
      :filter-node-method="filterNode"
      @node-click="orgCurrentChange"
    >
      <div slot-scope="{ data }" class="text w-full flex-between" :class="[data.childrenList ? 'text' : 'text1']">
        <div>
          <i class="icon-tree" />
          <span :title="data[defaultProps.label]">{{ data[defaultProps.label] }}</span>
        </div>
        <div v-if="!data.childrenList">
          <img
            src="../../assets/images/backstage/play.png"
            alt=""
            class="img"
            @click.stop="orgCurrentChange(data, 'p2', 'p3', 0)"
          >
          <img
            src="../../assets/images/backstage/replay.png"
            alt=""
            class="img ml-10"
            @click.stop="orgCurrentChange(data, 'p2', 'p3', 1)"
          >
        </div>
      </div>
    </el-tree>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Duty from '@/services/duty.js'
export default {
  name: 'Tree',
  props: {
    defaultProps: {
      type: Object,
      default: () => ({
        label: 'nodeName',
        children: 'childrenList'
      })
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    filterText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ids: [],
      checkedIds: [],
      list: [],
      getTreeArr: []
    }
  },
  computed: {
    ...mapState({
      selected: state => state.monitor.selected,
      currentNineMonitor: state => state.monitor.currentNineMonitor
    })
  },
  watch: {
    filterText(val) {
      this.$refs.orgtree.filter(val)
      return val
    }
  },
  created() {
    this.getParkingList()
  },
  mounted() { },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.nodeName.indexOf(value) !== -1
    },
    getOrgTree() {
      this.list = []
      this.$nextTick(function () {
        const nid = this.list[0].id
        this.ids = [nid,]
        this.checkedIds = [nid,]
      })
    },
    orgCurrentChange(data, p2, p3, type = 0) {
      // type 0 播放
      // type 1 回放

      data.playMode = type
      this.$refs.orgtree.setCheckedKeys([data.id,])
      if (data.childrenList && data.childrenList.length > 0) { return }
      this.$emit('handleClick', data)
      if (this.selected == null) {
        return this.$message.warning('请选择添加的位置')
      }
      let isnext = false
      this.getTreeArr.forEach((item, index) => {
        if (item.selected === this.selected) {
          this.getTreeArr.splice(index, 1)
        }
        if (item.id === data.id) {
          this.$message.error('监控已添加')
          isnext = true
        }
      })
      if (!isnext) {
        data.selected = this.selected
        this.getTreeArr.push(data)
        this.$store.dispatch('Edit_monitor', { index: this.selected, currentMonitor: data, type: type })
      }
    },
    // 判断监控是否添加
    isSelected(selected, arr) {
      const arrItem = arr[selected]
      if (arrItem) {
        this.$message.warning('该位置已添加监控')
        return false
      } else {
        return true
      }
    },
    async getParkingList() {
      const res = await Duty.parkingList()
      this.list = res.data.map(item => {
        return {
          id: item.id,
          nodeName: item.parkName,
          childrenList: []
        }
      })
      this.childrenListPush(this.list)
    },
    childrenListPush(list) {
      list.forEach(item => {
        this.getDeviceInfoGetDeviceList(item.id)
      })
    },
    async getDeviceInfoGetDeviceList(id) {
      const res = await Duty.deviceInfoGetDeviceList({ parkingId: id })
      if (res.data.length === 0) {
        this.list = this.list.filter(item => {
          return item.id !== id
        })
      }
      if (res.data && res.data.length > 0) {
        this.list = this.list.map(item => {
          if (item.id === id) {
            item.childrenList = res.data.map(item => {
              return {
                id: item.id,
                deviceNo: item.deviceNo,
                nodeName: item.deviceName,
                gateId: item.gateId,
                gateNames: item.gateNames,
                parkingId: item.parkingId
              }
            })
          }
          return item
        })
      }
    },
    handleAllParking() { }
  }
}
</script>
<style lang="scss" scoped>
.org-tree {
  overflow-y: auto;

  .title {
    font-family: Alibaba PuHuiTi 2.0;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #3680FF;
  }

  ::v-deep .el-tree {
    background: transparent;
    color: #222222;

    .el-tree-node:focus>.el-tree-node__content {
      background: transparent !important;
      color: #222222;

      .el-tree-node__expand-icon {
        color: #222222;
        // margin-left: 0px !important;
      }

      .el-tree-node__expand-icon.is-leaf {
        color: transparent !important;
      }
    }

    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background: transparent !important;
    }

    .is-checked>.el-tree-node__content {
      color: #3680FF !important;

      .el-tree-node__expand-icon {
        color: #3680FF !important;
      }

      .el-tree-node__expand-icon.is-leaf {
        color: transparent !important;
      }

      // .el-icon-caret-right:before{
      //   content: url('../../assets/images/home/left-icon.png');
      //   width: 16px;
      //   height: 16px;
      // }
    }

    .el-tree-node__content {
      height: 40px;

      .el-tree-node__expand-icon {
        // background: #3680FF1A;
        // color: #3680FF;
        // margin-left: 10px;
      }
    }

    .el-tree-node[aria-disabled='true']>.el-tree-node__content,
    .el-tree-node[aria-disabled='true']>.el-tree-node__content:hover {
      background: transparent !important;
      cursor: initial;
    }

    .el-tree-node__content:hover {
      background-color: transparent !important;
    }

    .text {
      margin-left: 5px;
      overflow: hidden;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .text1 {
      color: #505D6F;
    }

    .img {
      width: 16px;
      height: 16px;
    }

    .el-tree-node__content {
      .el-icon-caret-right:before {
        display: inline-block;
        content: "";
        /* 设置为空字符串，因为我们将使用background来定义图片 */
        background: url('../../assets/images/home/left-icon.png') no-repeat center center;
        /* 设置背景图片 */
        background-size: 16px 16px;
        /* 设置背景图片的大小 */
        width: 16px !important;
        height: 16px !important;
      }

      .el-tree-node__expand-icon.is-leaf {
        visibility: hidden;
      }
    }
  }
}
</style>
